@import "./mlkCommon.less";
// section{width:100%;height:100%;overflow:hidden;position:absolute;top:0;left:0;}
// aside{position:fixed;top:0;left:0;width:100%;height:100%;z-index:19;background-color:rgba(0,0,0,0.85);}

article {
    background: #ffccd1;
    position: relative;

    .p {
        width: 100%;
        height: 10.8rem;
        position: absolute;
        top: 1.1rem;
        left: 0;

        .logo {
            .wh(2.2rem, 0.41rem);
            .background("index/logo.png");
            margin-left: 0.28rem;
        }

        .tree {
            .wh(100%, 2.94rem);
            .background("p1/tree.png");
            position: absolute;
            top: 0;
            left: 0;
            z-index: 8;
        }

        .coloured_ribbon {
            .wh(100%, 2.33rem);
            .background("p1/i1.png");
            position: absolute;
            top: 2.68rem;
            left: 0;
        }

        &.p1 {
            .box {
                .wh(5.68rem, 7.73rem);
                .background("p1/box.png");
                margin: 1.32rem auto 0;

                .box_title {
                    .wh(4.31rem, 5.77rem);
                    .background("p1/tip.png");
                    position: absolute;
                    top: 1.02rem;
                    left: 50%;
                    transform: translateX(-50%);
                    // .mask_image("p1/mask.png");
                    -webkit-mask-image:url("../images/p1/mask.png");
                    overflow: hidden;
                    -webkit-mask-size: 100% 0;
                    animation: p1_text_animate 6s linear forwards;
                }
            }
        }

        .start {
            .wh(2.6rem, 0.9rem);
            .background("p1/btn.png");
            margin: 0.37rem auto 0;
        }

        &.p2 {
            .coloured_ribbon {
                top: 4rem;
            }

            .coloured_ribbon2 {
                .wh(100%, 0.36rem);
                .background("p2/i2.png");
                position: absolute;
                top: 7.18rem;
                left: 0;
            }

            .box {
                .wh(100%, 2.33rem);
                .background("p2/box.png");
                position: absolute;
                // top: 4.3rem;
                left: 50%;
                // transform: translateX(-50%);
                .position_left_right(100%, 4.3rem);
            }

            .start {
                .wh(2.6rem, 0.9rem);
                .background("p1/btn.png");
                position: absolute;
                bottom: 0.14rem;
                left: 50%;
                // transform: translateX(-50%);
                margin-left: -1.3rem;

            }
        }

        &.p3 {
            .rules_icon {
                .wh(100%, 1.27rem);
                .background("p3/rule_icon.png");
                position: absolute;
                top: 1.52rem;
                left: 0;
            }

            .coloured_ribbon3 {
                .wh(100%, 2.56rem);
                .background("p3/caidai.png");
                position: absolute;
                top: 1.4rem;
                left: 0;
            }

            .box {
                .wh(5.68rem, 6.8rem);
                .background("p3/box.png");
                position: absolute;
                top: 2.98rem;
                left: 50%;
                transform: translateX(-50%);

                .text {
                    .wh(4.43rem, 5.48rem);
                    .background("p3/text.png");
                    position: absolute;
                    top: 0.78rem;
                    left: 50%;
                    transform: translateX(-50%);
                }
            }

            .star1 {
                .wh(0.59rem, 0.81rem);
                .background("p3/star.png");
                position: absolute;
                top: 2.2rem;
                right: 0.48rem;
                z-index: 1;
                animation-duration: 2s;
            }

            .star2 {
                .wh(0.39rem, 0.53rem);
                .background("p3/star.png");
                position: absolute;
                top: 2.86rem;
                right: 1.1rem;
                z-index: 1;
                animation-duration: 2s;
                animation-delay: 1s;
            }

            .star3 {
                .wh(0.59rem, 0.81rem);
                .background("p3/star.png");
                position: absolute;
                top: 8.1rem;
                left: 1.1rem;
                z-index: 1;
                animation-duration: 2s;
            }

            .star4 {
                .wh(0.39rem, 0.53rem);
                .background("p3/star.png");
                position: absolute;
                top: 8.78rem;
                left: 0.62rem;
                z-index: 1;
                animation-duration: 2s;
                animation-delay: 1s;
            }

            .start {
                .wh(2.6rem, 0.9rem);
                .background("p3/start.png");
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
            }
        }

        &.p4 {
            .coloured_ribbon3 {
                .wh(100%, 2.56rem);
                .background("p3/caidai.png");
                position: absolute;
                top: 1.4rem;
                left: 0;
            }

            .gold_icon {
                .wh(100%, 1.65rem);
                .background("p4/gold_icon.png");
                position: absolute;
                top: 1.53rem;
                left: 0;
            }

            .text {
                .wh(2.7rem, 0.56rem);
                .background("p4/text.png");
                position: absolute;
                top: 3.34rem;
                left: 50%;
                transform: translateX(-50%);

                .text_num {
                    display: block;
                    font-size: 0.33rem;
                    color: #000;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    left: 1.28rem;
                    font-weight: bold;
                }
            }

            .box {
                .wh(100%, 5.44rem);
                .background("p4/box.png");
                position: absolute;
                top: 4.12rem;
                left: 0;

                .box_star {
                    .wh(100%, 0.42rem);
                    .background("p4/star_group.png");
                    position: absolute;
                    top: 0.08rem;
                    left: 0;
                    // .mask_image("p1/mask.png");
                    -webkit-mask-image:url("../images/p1/mask.png");
                    overflow: hidden;
                    -webkit-mask-size: 100% 0;
                    opacity: 0;
                    animation: p4_star_animate 1s linear infinite alternate;
                }

                .shimao {
                    width: 3.62rem !important;
                    height: 2.24rem !important;
                    position: absolute;
                    top: 1.54rem;
                    left: 50%;
                    transform: translateX(-50%);

                    &.swiper-container {
                        width: 100%;
                        height: 100%;

                        .swiper-slide {
                            .wh(100%, 100%);

                            &.i1 {
                                .background("p4/i1.png");
                            }

                            &.i2 {
                                .background("p4/i2.png");
                            }

                            &.i3 {
                                .background("p4/i3.png");
                            }

                            &.i4 {
                                .background("p4/i4.png");
                            }

                            &.i5 {
                                .background("p4/i5.png");
                            }

                            &.i6 {
                                .background("p4/i6.png");
                            }

                            &.i7 {
                                .background("p4/i7.png");
                            }

                            &.i8 {
                                .background("p4/i8.png");
                            }

                            &.i9 {
                                .background("p4/i9.png");
                            }

                            &.i10 {
                                .background("p4/i10.png");
                            }
                        }
                    }
                }

                .gift {
                    .wh(1.57rem, 1.64rem);
                    .background("p4/box2.png");
                    position: absolute;
                    top: 2.14rem;
                    left: 50%;
                    transform: translateX(-50%);
                }

                .ball {
                    .wh(0.5rem, 0.5rem);
                    .background("p4/ball.png");
                    position: absolute;
                    top: 4.26rem;
                    left: 50%;
                    transform: translateX(-50%);
                }

                .ball_an {
                    animation: ball_animate 2s linear forwards;
                }
            }

            .start {
                .wh(2.05rem, 0.8rem);
                .background("p4/start.png");
                position: absolute;
                bottom: 0;
                left: 50%;
                margin-left: -1.025rem;
            }

            .star1 {
                .wh(0.59rem, 0.81rem);
                .background("p3/star.png");
                position: absolute;
                top: 1.84rem;
                right: 0.3rem;
                z-index: 1;
                animation-duration: 2s;
            }

            .star2 {
                .wh(0.39rem, 0.53rem);
                .background("p3/star.png");
                position: absolute;
                top: 2.4rem;
                right: 0.84rem;
                z-index: 1;
                animation-duration: 2s;
                animation-delay: 1s;
            }

            .star3 {
                .wh(0.59rem, 0.81rem);
                .background("p3/star.png");
                position: absolute;
                top: 9.53rem;
                left: 0.8rem;
                z-index: 1;
                animation-duration: 2s;
            }

            .star4 {
                .wh(0.39rem, 0.53rem);
                .background("p3/star.png");
                position: absolute;
                top: 9.83rem;
                left: 0.3rem;
                z-index: 1;
                animation-duration: 2s;
                animation-delay: 1s;
            }
        }

        &.p5 {
            .box {
                .wh(6.11rem, 9.02rem);
                .background("p5/box.png");
                .position_left_right(6.11rem, 1.37rem);

                .box_icon {
                    .wh(3.81rem, 5.84rem);
                    .background("p5/gift.png");
                    position: absolute;
                    top: 1.32rem;
                    left: 50%;
                    transform: translateX(-50%);
                }

                .star1 {
                    .wh(0.59rem, 0.81rem);
                    .background("p3/star.png");
                    position: absolute;
                    top: 2.8rem;
                    left: 4.72rem;
                }

                .star2 {
                    .wh(0.22rem, 0.31rem);
                    .background("p3/star.png");
                    position: absolute;
                    top: 4.54rem;
                    left: 4.92rem;
                    animation-delay: 1s;
                }

                .star3 {
                    .wh(0.36rem, 0.49rem);
                    .background("p3/star.png");
                    position: absolute;
                    top: 3.96rem;
                    left: 1.34rem;
                    animation-delay: 1.5s;
                }

                .more_icon {
                    .wh(2.96rem, 1rem);
                    .background("p5/more.png");
                    .position_left_right(2.91rem, 7.1rem);
                }
            }

            .coloured_ribbon {
                .wh(100%, 2.1rem);
                .background("p5/caidai1.png");
                position: absolute;
                top: 0.94rem;
                left: 0;
            }

            .coloured_ribbon2 {
                .wh(100%, 1.68rem);
                .background("p5/caidai2.png");
                position: absolute;
                top: 9.2rem;
                left: 0;
                pointer-events: none;
            }
        }

        &.p6 {
            .coloured_ribbon {
                .wh(100%, 2.1rem);
                .background("p5/caidai1.png");
                position: absolute;
                top: 0.94rem;
                left: 0;
                z-index: 8;
            }

            .coloured_ribbon2 {
                .wh(100%, 1.68rem);
                .background("p6/caidai2.png");
                position: absolute;
                top: 9.2rem;
                left: 0;
                pointer-events: none;
                z-index: 8;
            }

            .box {
                .wh(6.11rem, 9.02rem);
                .background("p6/box.png");
                .position_left_right(6.11rem, 1.36rem);

                .text {
                    .wh(5rem, 5.65rem);
                    .background("p6/text.png");
                    .position_left_right(5rem, 1.34rem);
                }

                .menu {
                    .wh(100%, 0.84rem);
                    position: absolute;
                    top: 7.54rem;
                    left: 0;

                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .menu_again {
                        .wh(2.62rem, 0.9rem);
                        .background("p6/again.png");
                        margin-right: 0.22rem;
                    }

                    .menu_share {
                        .wh(2.62rem, 0.9rem);
                        .background("p6/share.png");
                    }
                }
            }

            .star1 {
                .wh(0.54rem, 0.74rem);
                .background("p3/star.png");
                position: absolute;
                top: 4.18rem;
                right: 1.76rem;
                z-index: 1;
            }

            .star2 {
                .wh(0.38rem, 0.54rem);
                .background("p3/star.png");
                position: absolute;
                top: 8.04rem;
                right: 0.18rem;
                z-index: 1;
                animation-delay: 1s;
            }

            .star3 {
                .wh(0.28rem, 0.42rem);
                .background("p3/star.png");
                position: absolute;
                top: 3.92rem;
                left: 0.3rem;
                z-index: 1;
                animation-delay: 1.5s;
            }

            .star4 {
                .wh(0.28rem, 0.4rem);
                .background("p3/star.png");
                position: absolute;
                top: 6.92rem;
                left: 1.9rem;
                z-index: 1;
                animation-delay: 2s;
            }
        }
    }

    .people {
        .wh(100%, 3.28rem);
        .background("p1/people.png");
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 9;
        pointer-events: none;
    }

    .gifts {
        .wh(100%, 2.07rem);
        .background("p2/gifts.png");
        position: absolute;
        bottom: 0;
        left: 0;
        pointer-events: none;
        z-index: 9;
    }

    .tree {
        .wh(100%, 1.56rem);
        .background("p5/tree.png");
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 9;
        pointer-events: none;
    }

    .share_mask {
        .wh(100%, 100%);
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.8);
        z-index: 999;

        .share {
            .wh(100%, 1.76rem);
            .background("common/share.png");
            position: absolute;
            top: 0;
            left: 0;
        }
    }
}

// 文字动画
@keyframes p1_text_animate {
    0% {
        -webkit-mask-size: 100% 0%;
    }

    100% {
        -webkit-mask-size: 100% 100%;
    }
}

// 一闪一闪亮晶晶
@keyframes p4_star_animate {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

// 球滚动
@keyframes ball_animate {
    0% {
        transform: scale(1) translateX(-50%);
    }

    100% {
        opacity: 0;
        top: 3.2rem;
        transform: scale(0.5) translateX(-50%);
    }

}

.bgmPlay {
    animation: rotate 3s linear infinite forwards;
}

// 旋转
@keyframes rotate {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

.bounceIn {
    -webkit-animation-duration: 0.5s;
}

@-webkit-keyframes bounceIn {

    0%,
    20%,
    40%,
    60%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.5, 0.5, 0.5);
        transform: scale5d(0.5, 0.5, 0.5);
    }

    20% {
        -webkit-transform: scale3d(1.5, 1.5, 1.5);
        transform: scale3d(1.5, 1.5, 1.5);
    }

    40% {
        -webkit-transform: scale3d(.5, .5, .5);
        transform: scale3d(.5, .5, .5);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        transform: scale3d(0.97, 0.97, 0.97);
    }

    to {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}


.swiper-container-free-mode>.swiper-wrapper {
    transition-timing-function: linear;
    margin: 0 auto;
    // transition-duration: 3000ms !important;
}